<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
           <el-form-item label="配送日期" prop="send_time">
              <el-date-picker
                v-model="form.send_time"
                type="date"
                class="wid220"
                :editable="false"
                placeholder="选择配送日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="分类" prop="category_id" class="wid220">
              <el-cascader
                v-model="form.category_id"
                :options="options"
                :props="defaultProps"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品" prop="related_order_sn">
              <el-input
                v-model.trim="form.related_order_sn"
                placeholder="商品"
                clearable
                class="wid220"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="$refs['userListFrom'].resetFields()"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_num boxdq marginTop10">
          <div class="main_num_l box">
            <p>
              <em
                >说明：修改配送单价，则同一配送日期内未结算订单商品同时完成修改，对账单状态转为已对账；</em
              >
            </p>
          </div>
        </div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
          >
            <el-table-column label="商品名称" prop="name" width="150">
              <template slot-scope="scope"
                >{{ scope.row.goods.name }}【{{
                  scope.row.spu_name.title
                }}】</template
              >
            </el-table-column>
            <el-table-column label="单位" prop="spu_unit.title" />
            <el-table-column label="订单数量" prop="count" />
            <el-table-column label="配送单价" prop="related_order_sn" class-name="main_hei">
              <template slot-scope="scope">
                <div class="mainus_pe">
                  <div v-if="!scope.row.freight_jc">
                    {{ scope.row.price }}
                    <svg
                      aria-hidden="true"
                      class="main_page_svg"
                      width="13"
                      height="13"
                      @click="freighta(scope.$index,'freight_jc')"
                    >
                      <use xlink:href="#icon-commodity_modify" />
                    </svg>
                  </div>
                  <div v-else class="boxnr">
                    <el-input
                      v-model="scope.row.price"
                      placeholder="配送单价"
                      class="wid80"
                    ></el-input>
                    <div class="boxnr">
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft10"
                        width="20"
                        height="20"
                        @click="inputBlur(scope.row.price,scope.$index,'freight_jc','price')"
                      >
                        <use xlink:href="#icon-index_tick" />
                      </svg>
                      <svg
                        aria-hidden="true"
                        class="main_page_svg marginLeft10"
                        width="12"
                        height="12"
                        @click="scope.row.price=scope.row.price_data,scope.row.freight_jc=false"
                      >
                        <use xlink:href="#icon-index_cross" />
                      </svg>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { statement_getGoods, statement_editPrice } from "@/api/financial/financialReceivables";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, recursion, category } from "@/utils/index";

export default {
  components: {},
  data() {
    return {
      // 列表数据
      list: {
        list: [],
      },
      listLoading: false,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
        name: "",
      },
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      offsetParent:true,
    };
  },
  created() {
    // 列表
    this.statement_getGoods();
  },
  methods: {
    // 点击排序
    freighta(index, name) {
      if (this.offsetParent) {
        this.list.list[index][name] = !this.list.list[index][name];
      }
    },
    // 焦点离开排序
    inputBlur(val, index, name, type) {
      this.offsetParent = false;
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) &&
        val != ""
      ) {
        this.list.list[index][name] = !this.list.list[index][name];
        this.offsetParent = true;
        this.goods_change(
          val,
          this.list.list[index].id,
          type
        );
      }
    },
    goods_change(val, id, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { goods_spu_id: id, send_time: this.form.send_time, value: val })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { goods_spu_id: id, send_time: this.form.send_time, value: val }
      );
      statement_editPrice(data).then((res) => {
        if (res.errcode == 0) {
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 搜索
    getArticleList() {
      this.statement_getGoods();
    },
    // 列表
    statement_getGoods() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      statement_getGoods(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          res.data.list.map((e) => {
            e.price="0.00"
            e.price_data=e.price
            e.freight_jc = false;
          })
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);

      return form;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 120px);
  }
}
</style>
